<!--示例-->
<template>
  <div class="example">
    <div class="example-left">
      <zz-table
        @handle= "Handle"
        @exportHanled ="exportHanled"
        @handleLoneCall = "handleLoneCall"
        @handleAllCall = "handleAllCall"
        @handleBlur = "handleBlur"
        @selectCallback = "selectCallback"
        @selectInputhandle = "selectInputhandle"
        :pt= 20
        :tableExport ="true"
        :showRemark ="true"
        :tableRemark = "tableRemark"
        :title="tableTilte"
        :dataList="tableList">
      </zz-table>
    </div>
    <div class="tableClass-layered mt15">
      <table style="width: 100%; text-align: center">
        <tr>
          <th rowspan="2">统计日期</th>
          <th class="border-left" colspan="2">质量问题</th>
        </tr>
        <tr>
          <th>新增问题</th>
          <th>待整改</th>
        </tr>
        <tr v-for="item in list">
          <td>{{item.code}}</td>
          <td>{{item.node}}</td>
          <td>
            <zz-date
              :place="place"
              @change="handleChange"
              type="day"
              :clearPosition="{top: 3, right:8}"
              style="width: 15%">
            </zz-date>
          </td>
        </tr>
      </table>
    </div>
    <div class="example-right tableClass">
      <table cellspacing="0">
        <tr>
          <th>1) 调用表格组件</th>
        </tr>
        <tr>
          <td><pre>{{explameTable}}</pre></td>
        </tr>
        <tr>
          <th>2) 列表参数</th>
        </tr>
        <tr>
          <td><pre>{{explameTableList}}</pre></td>
        </tr>
        <tr>
          <th>3) 写入到methods方法</th>
        </tr>
        <tr>
          <td><pre>{{explameMethods}}</pre></td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
  export default {
    name: '',
    data () {
      return {
        selectIds: [],
        tableRemark: '这是提示语',
        tableTilte: [
          {name: 'check', checkTip: 'name', width: '20%', align: 'left'},
          {name: '表头1', width: '10%', align: 'left'},
          {name: '表头2', width: '20%', align: 'left'},
          {name: '表头3', width: '10%', align: 'center'},
          {name: '表头4', width: '20%', align: 'left'},
          {name: '表头5', width: '20%', align: 'left'},
          {name: '表头6', width: '20%', align: 'left'}
        ],
        list: [
          {code: '01', node: '开工'},
          {code: '02', node: '基础'},
          {code: '03', node: '主体'},
          {code: '04', node: '开售'},
          {code: '05', node: '装修'},
          {code: '06', node: '竣工验收'}
        ],
        tableList: [
          {
            empty: '',
            name: 111,
            colors: {name: 'aaa', color: '#ff5027'},
            manInfo: {name: '陈伟', info: {message: 'SSGF', color: '#22a6b5'}},
            link: {name: '跳到详情', id: 111, route: 'details', data: ''},
            date: 444,
            handle: [{name: '编辑', type: 1}, {name: '删除', type: 2}, {select: true, selectName: '正常', width: '50px', color: '#22a6b5', selectData: {data: 22}, selectList: {1: '正常', 2: '异常'}}],
            select: {selectName: '正常', selectList: {1: '正常', 2: '异常'}},
            specialdata: {}
          },
          {
            check: {check: false, checkData: {}},
            name: 111,
            iconTip: {name: '陈伟AAAAAAA', iconfont: {font: 'table_warning', color: '#f8a63a', position: 'right'}},
            link: {name: '跳到详情', id: 111, route: 'details', data: ''},
            date: 444,
            handle: [{name: '编辑', type: 1}, {name: '删除', type: 2}],
            selects: {selectName: '正常', selectList: {1: '正常', 2: '异常'}, isShowInput: false, selectInput: '2', inputType: '天'}
          },
          {
            check: {check: false, checkData: {}},
            name: 111,
            iconTip: {name: '陈伟', iconfont: {font: 'triangle-down', position: 'left', fontSize: '14px', mr: '3px'}},
            link: {name: '跳到详情', id: 111, route: 'details', data: ''},
            handle: [{name: '编辑', type: 1}, {name: '删除', type: 2}],
            selects: {selectName: '正常', selectList: {1: '正常', 2: '异常'}, isShowInput: false, selectInput: '1', inputType: '天'},
            auto: {constructionTeamId: '', placeholder: '请填写施工单位名称', label: 'name', query: ['constructionProjectTeam.name', 'constructionProjectTeam.type'], url: `http://project.bgy.t.pinming.org/front/person/findProjectTeam.htm`, constant: 1}
          }
        ],
        explameTable: `<zz-table
          @handle= "Handle"  回调函数
          @exportHanled ="exportHanled" 回调导出函数
          @handleAllCall ="handleAllCall" 复选框回调函数
          @handleLoneCall = "handleLoneCall"
          @handleBlur = "handleBlur" 输入框触发事件
          :pt= 20 顶部padding
          :tableExport ="true" 是否打开导出
          :showRemark ="true" 是否打开导出一栏的提示语
          :tableRemark = "tableRemark" 导出一栏的提示语
          :title="tableTilte" 表格标题
          :dataList="tableList"> 表格列表
        </zz-table>`,

        explameTableList: `tableList: [
          {

          /**
            * checkData: data 回调需要用的数据 taskId之类
            **/
            checkData: data

            /**
            * 启用复选框 key用'check'
            * false 是否默认打勾
            **/
            check: false,

            // 没有特殊情况的 key 随便定义
            name: 111,

            /**
            * 跳详情或者跳到其它页面 key用'link'
            * {name: '跳到详情' } 表格显示的内容
            * {route: projectDetails} 跳到那个页面的 路由的名字  需要在 route 文件定义
            * {id: pjid} 如果跳到项目详情 就需要 项目id
            * 在项目详情页面 pjId = this.$route.query.pjId
            * {data: data} 如果需要多传参数 可以放在 data里面
            * 同理 taskId = this.$route.query.data
            * 不建议传三个以上的数据 会导致 后期维护困难
            **/
            link: {name: '跳到详情', route: 'details', id: 111, data: ''},

            count: 1000, 金钱

            size: 333, 计量单位

            date: 444, 时间

            /**
            * 是否需要直接编辑
            **/
            edit: x.amount

            /**
            * 表格需要操作时 key用'handle'
            * {name: '编辑' } 需要显示的内容
            * {type: 1} 回调事件 需要判断 是什么事件
            * 栗子：
                Handle (item) {
                  this.needData: item.data
                  switch (item.type){
                    case 1:
                      alert('这是编辑回调')
                      break
                    case 2:
                      alert('这是删除回调')
                      break
                  }
                },
            * {data: data} 回调事件 需要数据
            **/
            handle: [{name: '编辑', type: 1, data: data}, {name: '删除', type: 2, data: data}]
          }
        ]`,
        explameMethods:
          `Handle (item) {
            switch (item.type) {
              case 1:
                alert('这是编辑回调')
                break
              case 2:
                alert('这是删除回调')
                break
            }
          },
          exportHanled () {
            alert('这是导出回调')
          },
          handleAllCall (items) {
            alert('全选')
            this.selectIds = items.map((item) => {
              return item.is
            })
          },
          handleLoneCall (items) {
            alert('选中某一个')
            this.selectIds = items.map((item) => {
              return item.is
            })
          },
          handleBlur (data) {
            let {item, value} = data
          }`
      }
    },
    methods: {
      Handle (item) {
        switch (item.type) {
          case 1:
            alert('这是编辑回调')
            break
          case 2:
            alert('这是删除回调')
            break
        }
      },
      exportHanled () {
        alert('这是导出回调')
      },
      handleAllCall (items) {
        this.selectIds = items.map((item) => {
          return item.id
        })
      },
      handleLoneCall (items) {
        this.selectIds = items.map((item) => {
          return item.id
        })
      },
      selectCallback () {
      },
      selectInputhandle () {
      },
      handleBlur (data) {
        let {item, value} = data
        console.log(item, value)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .example{
    padding: 20px;
    .example-left{
      float: left;
      width: 100%;
    }
    .example-right{
      float: right;
      width: 48%;
      background: #fff;
      padding: 20px;
    }
  }
</style>
